<template lang="">
  <div>
    <a-pagination
      class="pagination"
      :total="total"
      hideOnSinglePage
      :defaultPageSize="pageSize"
      simple
      v-model:current="current"
      @change="onCurrentPageNumChange"
    />
  </div>
</template>
<script>
    import {
        watchEffect
    } from "vue";

    import {
        useWindowScrollTo
    } from "@u/scroll.js";
    import {
        useRouteParamChange
    } from "@u/router.js";
    import {
        useLinkedRouterParam
    } from "@u/route.js";
    export default {
        props: {
            total: {
                type: Number,
                default: 0,
            },
            pageSize: {
                type: Number,
                default: 5,
            },
            hasScroll: {
                type: Boolean,
                default: true,
            },
        },
        setup(props, {
            emit
        }) {
            //绑定动态数据这里注释掉
            // const pagination = reactive({
            //     //页码页数
            //     total: 100,
            //     pageSize: 5,
            //     current: 1
            // })
            const current = useLinkedRouterParam("pageNum");

            watchEffect(() => {
                if (props.hasScroll) {
                    //如果props里的hasScroll为true就开始滚动  里面加auto切换就不会闪
                    useWindowScrollTo({
                        top: 0,
                    }, "auto");
                }
                emit("change", current.value);
            });
            const pageNumParmChange = useRouteParamChange("pageNum");

            //路由id与页码绑定
            const onCurrentPageNumChange = (pageNum) => pageNumParmChange(pageNum);
            return {
                onCurrentPageNumChange,
                current,
            };
        },
    };
</script>
<style scoped>
    .pagination {
        text-align: center;
    }
</style>